<template>
  <div class="cal_con">
    <div class="cal_header">
      <el-date-picker
        v-model="year"
        :clearable="false"
        :editable="false"
        :append-to-body="false"
        align="center"
        format="yyyy年"
        value-format="yyyy"
        type="year"
        popper-class="__year"
        placeholder="选择年" class="date_picker _year"
        @change="yearChange">
      </el-date-picker>

      <el-date-picker
        v-model="month"
        :clearable="false"
        :editable="false"
        :append-to-body="false"
        align="center"
        format="M月"
        value-format="M"
        type="month"
        popper-class="__month"
        placeholder="选择月" class="date_picker _month"
        @change="monthChange">
      </el-date-picker>
    </div>

    <div class="cal_month" v-loading="loading"
         element-loading-text="加载中..."
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.6)">
      <div class="cal_m_weeks">
        <span
          v-for="w in weeks"
          :key="w"
          class="cal_m_day_cell"
        >{{w}}</span>
      </div>
      <div class="cal_m_days">
        <div
          v-for="(ds, index) in monthData"
          :key="index"
          class="cal_m_day_line"
        >
          <div
            v-for="d in ds"
            :key="d.day"
            class="cal_m_day_cell"
            :class="{curMon: d.type == 0}"
            :style="{color: getCellColor(d)}"
            @click="onClick(d, $event)"
            @mouseenter="mouseenter(d, $event)"
            @mouseleave="mouseleave(d, $event)"
          >
            <!--<span class="_day">{{ d.day }}</span>-->
            <slot :name="d.fullYear + '-' + d.month + '-' + d.day">

              <template v-if="d.type == 0">
                <div class="dayWrap _default">
                  <span class="_day">{{ d.day }}</span>
                  <div class="crew">
                    <div class="crew_item">暂未排景</div>
                  </div>
                </div>
              </template>

            </slot>
            <!--<slot name="test"></slot>-->
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'index',
    components: {},
    props: {
      date: {
        type: Date,
        default: () => new Date()
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        now: this.date,
        year: 0,
        month: 0,
        weeks: ["日", "一", "二", "三", "四", "五", "六"],
        monthData: [],
        currentYear: new Date().getFullYear(),
        currentMonth: new Date().getMonth() + 1,
        currentDay: new Date().getDate(),
      }
    },
    mounted() {
      this.setYearMonth(this.now)
      this.generateMonth(this.now)
    },
    methods: {
      setYearMonth(now) {
        this.year = moment(now).format('YYYY')
        this.month = moment(now).format('M')
      },
      yearChange(val){
        let n = this.now
        let date = new Date(val, n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());
        this.setYearMonthInfos(date)
      },
      monthChange(val){
        let n = this.now
        let date = new Date(n.getFullYear(), val - 1, n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());
        this.setYearMonthInfos(date)
      },

      setYearMonthInfos(date) {
        this.setYearMonth(date)
        this.generateMonth(date)
        this.now = date
        this.dateChange()
      },
      generateMonth(date) {
        date.setDate(1)
        // 星期 0 - 6， 星期天 - 星期6
        let weekStart = date.getDay()

        let endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0)
        let dayEnd = endDate.getDate()
        // 星期 0 - 6， 星期天 - 星期6
        let weeEnd = endDate.getDay()

        let milsStart = date.getTime()
        let dayMils = 24 * 60 * 60 * 1000
        let milsEnd = endDate.getTime() + dayMils

        let monthDatas = []
        let current;
        // 上个月的几天
        for (let i = 0; i < weekStart; i++) {
          current = new Date(milsStart - (weekStart - i) * dayMils)
          monthDatas.push({
            type: -1,
            date: current,
            fullYear: current.getFullYear(),
            month: current.getMonth() + 1,
            day: current.getDate()
          })
        }
        // 当前月
        for (let i = 0; i < dayEnd; i++) {
          current = new Date(milsStart + i * dayMils)
          monthDatas.push({
            type: 0,
            date: current,
            fullYear: current.getFullYear(),
            month: current.getMonth() + 1,
            day: current.getDate()
          })
        }
        // 下个月的几天
        for (let i = 0; i < (6 - weeEnd); i++) {
          current = new Date(milsEnd + i * dayMils)
          monthDatas.push({
            type: 1,
            date: current,
            fullYear: current.getFullYear(),
            month: current.getMonth() + 1,
            day: current.getDate()
          })
        }

        this.monthData = []
        for (let i = 0; i < monthDatas.length; i++) {
          let mi = i % 7;
          if (mi == 0) {
            this.monthData.push([])
          }
          this.monthData[Math.floor(i / 7)].push(monthDatas[i])
        }

        // 少于6行，补足6行
        if (this.monthData.length <= 5) {
          milsStart = current.getTime()
          let lastLine = []
          for (let i = 1; i <= 7; i++) {
            current = new Date(milsStart + i * dayMils)
            lastLine.push({
              type: 1,
              date: current,
              fullYear: current.getFullYear(),
              month: current.getMonth() + 1,
              day: current.getDate()
            })
          }
          this.monthData.push(lastLine)
        }

      },

      getCellColor(d) {
        // if (d.fullYear == this.currentYear && d.month == this.currentMonth && d.day == this.currentDay) {
        //   return "#409eff"
        // }
        let color = d.type == -1 ? '#656565' : (d.type == 1 ? '#656565  ' : '')

        return color;
      },
      onClick(d, event){
        this.$emit('on-click', d, event)
      },
      mouseenter(d, event) {
        this.$emit("enter", d, event)
      },
      mouseleave(d, event) {
        this.$emit("leave", d, event)
      },
      dateChange() {
        let fullYear = this.now.getFullYear()
        let month = this.now.getMonth()

        let startDay = new Date(fullYear, month, 1)
        let endDay = new Date(fullYear, month + 1, 0, 23, 59, 59)

        this.$emit("changeMonth", startDay, endDay)
      }
    }
  }
</script>

<style scoped lang="scss">
  .cal_con {
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    margin: auto;

    .cal_header {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      ::v-deep .date_picker {
        width: 229px; height: 32px; z-index: 99;
        .el-input__inner {
          height: 32px; line-height: 30px; cursor: pointer;
          background-color: rgba(0,105,255,0.32);
          border: 1px solid rgba(0,105,255,1);
          border-radius: 0; color: #fff; font-size: 16px;
        }
      }
      /*---*/
      .cal_h_left {
        height: 100%;
        display: flex;

        .cal_h_btn {
          height: 100%;
          width: 24px;
          cursor: pointer;
        }

        .cal_h_btn:hover {
          background-color: #ebeef5;
        }

        .cal_h_l_icon {
          height: 8px;
          width: 12px;
          margin: auto;
        }
      }
      /*---*/
    }

    .cal_month {
      margin-top: 16px; font-size: 12px; text-align: center; height: calc(100% - 48px);
      background: rgba(0,105,255,0.08); border: 1px solid rgba(0,105,255,0.24);
      ::v-deep .el-loading-spinner {
        i, .el-loading-text {
          font-size: 18px!important;
        }
       }

      .cal_m_weeks {
        height: 40px; background: rgba(0,105,255,0.16);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .cal_m_day_cell {
          font-size: 16px; color: #fff;
        }
      }

      .cal_m_days {
        height: calc(100% - 40px);
        padding: 12px 6px;
        display: flex;
        justify-content: space-around;
        justify-items: center;
        flex-wrap: wrap; align-content: space-between;
        .cal_m_day_line {
          width: 100%;
          display: flex;
          justify-content: space-around;
          justify-items: center;
        }

        .cal_m_day_cell {
          width: 58px; height: 46px; font-size: 16px;
          background: rgba(0,105,255,0.16); border: 1px solid rgba(0,105,255,1);
          cursor: pointer;
          position: relative; z-index: 2;
          ._day {
            position: absolute; z-index: 9999; left: 5px; top: 5px;
          }
          &.curMon {
            .dayWrap {
              width: 100%; height: 100%; border: 1px solid #01E6FE; color: #00FDF3; background: rgba(1,230,254,0.2);
              &._default {
                border: 1px solid rgb(0 105 255); color: #197FFF; background: rgba(0,105,255,0.16);
              }
            }
          }
        }

      }
    }
  }

</style>
<style lang="scss">
  .__year, .__month {
    top:32px!important;
    background-color: rgba(2,46,109,1)!important;
    border: 1px solid rgba(0,105,255,1)!important;
    .popper__arrow {
      top: -8px!important;
      border-bottom-color: transparent!important;
      &:after { border-bottom-color: rgba(0,105,255,1)!important; }
    }
    .current {
      .cell { color: #00F7FF!important;}
    }
    .cell { color: #fff!important;}
  }
  .__year {
    .el-picker-panel__icon-btn,.el-date-picker__header-label { color: #fff; }
    .el-date-picker__header { border: 0!important; }
    .el-year-table td { padding: 10px 3px!important;}
  }
  .__month {
    .el-date-picker__header { display: none!important; }
  }
</style>
